{% extends "base.html" %}

{% block title %}内容管理{% endblock %}

{% block content %}
<div class="container mt-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2>内容管理</h2>
        <a href="{{ url_for('manage_content') }}?action=new" class="btn btn-primary">
            <i class="bi bi-plus-circle"></i> 创建新内容
        </a>
    </div>

    {% if request.args.get('action') == 'new' %}
    <div class="card mb-4">
        <div class="card-header">
            <h5>创建新内容</h5>
        </div>
        <div class="card-body">
            <form method="POST" action="{{ url_for('manage_content') }}">
                <div class="mb-3">
                    <label for="title" class="form-label">标题</label>
                    <input type="text" class="form-control" id="title" name="title" required>
                </div>
                
                <div class="mb-3">
                    <label for="description" class="form-label">描述</label>
                    <textarea class="form-control" id="description" name="description" rows="3"></textarea>
                </div>
                
                <div class="mb-3">
                    <label for="content_type" class="form-label">内容类型</label>
                    <select class="form-select" id="content_type" name="content_type" required>
                        <option value="">选择类型</option>
                        <option value="article">文章</option>
                        <option value="video">视频</option>
                        <option value="image">图片</option>
                        <option value="audio">音频</option>
                    </select>
                </div>
                
                <div class="mb-3">
                    <label for="status" class="form-label">状态</label>
                    <select class="form-select" id="status" name="status">
                        <option value="draft">草稿</option>
                        <option value="published">已发布</option>
                        <option value="archived">已归档</option>
                    </select>
                </div>
                
                <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                    <button type="submit" class="btn btn-primary">保存</button>
                    <a href="{{ url_for('manage_content') }}" class="btn btn-outline-secondary">取消</a>
                </div>
            </form>
        </div>
    </div>
    {% endif %}

    <div class="card">
        <div class="card-header">
            <div class="d-flex justify-content-between align-items-center">
                <h5 class="mb-0">我的内容</h5>
                <div>
                    <select class="form-select form-select-sm" id="filter-status" onchange="filterContent()">
                        <option value="">全部状态</option>
                        <option value="draft">草稿</option>
                        <option value="published">已发布</option>
                        <option value="archived">已归档</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th>标题</th>
                            <th>类型</th>
                            <th>状态</th>
                            <th>创建时间</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for content in contents %}
                        <tr data-status="{{ content.status }}">
                            <td>{{ content.title }}</td>
                            <td>{{ content.content_type }}</td>
                            <td>
                                <span class="badge bg-{{ 'success' if content.status == 'published' else 'warning' if content.status == 'draft' else 'secondary' }}">
                                    {{ content.status }}
                                </span>
                            </td>
                            <td>{{ content.created_at.strftime('%Y-%m-%d') }}</td>
                            <td>
                        <a href="{{ url_for('edit_content', content_id=content.id) }}" class="btn btn-sm btn-outline-primary">编辑</a>
                        <form action="{{ url_for('delete_content', content_id=content.id) }}" method="POST" style="display: inline;">
                            <button type="submit" class="btn btn-sm btn-outline-danger" onclick="return confirm('确定要删除此内容吗？')">删除</button>
                        </form>
                            </td>
                        </tr>
                        {% else %}
                        <tr>
                            <td colspan="5" class="text-center">暂无内容</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<script>
function filterContent() {
    const status = document.getElementById('filter-status').value;
    const rows = document.querySelectorAll('tbody tr');
    
    rows.forEach(row => {
        if (!status || row.getAttribute('data-status') === status) {
            row.style.display = '';
        } else {
            row.style.display = 'none';
        }
    });
}
</script>
{% endblock %}
